<template>
  <div>
    <!-- 导航条 -->
    <nav-bar>
      <div slot="title">类别列表</div>
    </nav-bar>

    <div class="container">
      <!-- 左侧菜单栏 -->
      <div class="slideBar">
        <van-sidebar v-model="slideBarCurrent">
          <van-sidebar-item
            v-for="item of slideBar"
            :key="item.id"
            :title="item.mallCateforyName"
          />
        </van-sidebar>
      </div>

      <div class="content">
        <!-- 顶部菜单栏 -->
        <div class="titleBar">
          <van-tabs v-model="titleBarCurrent">
            <van-tab
              v-for="item of titleBar"
              :key="item.id"
              :title="item.mallSubName"
            >
              <!-- 列表 -->
              <div class="list">
                <div v-for="item of list" :key="item.id" class="list-item">
                  <van-image
                    class="list-item-img"
                    :src="$utils.$filterImgUrl(item.pictureComperssPath)"
                    lazy-load
                    @click="goDetails(item.id)"
                  >
                    <template v-slot:loading>
                      <van-loading type="spinner" size="20" />
                    </template>
                    <template v-slot:error>图片失效</template>
                  </van-image>
                  <div class="list-item-container">
                    <p>{{ item.name }}</p>
                    <p>{{ item.presentPrice }}</p>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      slideBar: [], //侧导航栏数据
      titleBar: [], //标题栏数据
      list: [], //列表数据
      slideBarCurrent:  Number(this.id) - 1, //侧导航高亮索引
      titleBarCurrent: 0, //标题导航高亮索引
    };
  },
  methods: {
    goDetails(id){
      this.$router.push({path:'/details',query:{id}})
    },
    async API_getCategoryList() {
      return await this.$utils.$http.request({
        url: "goods/getCategoryList",
      });
    },
    async API_getCategorySubList(categoryId) {
      return await this.$utils.$http.request({
        url: "goods/getCategorySubList",
        method: "POST",
        data: {
          categoryId,
        },
      });
    },
    async API_getGoodsListByCategorySubID(categorySubId) {
      return await this.$utils.$http.request({
        url: "goods/getGoodsListByCategorySubID",
        method: "POST",
        data: {
          categorySubId,
        },
      });
    },
    async cbRes(slideBarIdx, titleBarIdx) {
      //获取接口数据
      let slideBarResult = await this.API_getCategoryList();

      let titleBarResult = await this.API_getCategorySubList(
        slideBarResult.data.data[slideBarIdx].id
      );

      let listResult = await this.API_getGoodsListByCategorySubID(
        titleBarResult.data.data[titleBarIdx].id
      );

      return {
        slideBarArr: slideBarResult.data.data,
        titleBarArr: titleBarResult.data.data,
        listResultArr: listResult.data.data,
      };
    },
    render({ slideBarArr, titleBarArr, listResultArr }) {
      //根据接口数据渲染
      this.slideBar = this.$utils.$filterArray(slideBarArr, 5);
      this.titleBar = titleBarArr;
      this.list = listResultArr;
    },
  },
  watch: {
    slideBarCurrent: {//监听测导航的索引
      async handler(newVal) {
        let result = await this.cbRes(newVal, this.titleBarCurrent);
        this.render(result);

        this.titleBarCurrent = 0;
      },
      immediate:true
    },
    titleBarCurrent: {//监听顶部导航的索引
      async handler(newVal) {
        let result = await this.cbRes(this.slideBarCurrent,newVal);
        this.render(result);
      },
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
}
.slideBar {
  width: 185px;
}
.content {
  flex: 1;
}
.titleBar {
  height: 83px;
  width: 100%;
}
.list-item {
  display: flex;
}
.list-item-img {
  width: 200px;
  height: 200px;
}
.list-item-container {
  flex: 1;
}
</style>

<!-- 1 "新鲜水果"
2 "中外名酒"
3 "营养奶品"
4 "个人护理"
5 "食品饮料" -->
